<template>
  <div>
    <!-- 服务费逾期 -->
    <h1 style="margin-top:20px">服务费逾期:</h1>
    <el-form label-width="154px" :model="show" style="margin-top:20px">
      <el-row>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="当前逾期金额：">
            <el-input
              :disabled="true"
              v-model="show.lendingAmount"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="当前逾期期数：">
            <el-input
              :disabled="true"
              v-model="show.haveAccount"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="更新时间：">
            <el-date-picker
              v-model="show.lendingTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :xl="2" :lg="8">
          <el-button
            type="primary"
            v-if="showUpLoansSuffix"
            @click="btnFun1"
            style="height: 32px;line-height: 0px;"
            >编 辑</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 每月还款额 -->
    <!-- <h1>每月还款额:</h1>
    <el-form label-width="154px" :model="show" style="margin-top:20px">
      <el-row>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="还款金额：">
            <el-input
              :disabled="true"
              v-model="show.surplusMoney"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="2" :lg="8">
          <el-button
            type="primary"
            v-if="showUpLoansSuffix"
            @click="btnFun2"
            style="height: 32px;line-height: 0px;"
            >编 辑</el-button
          >
        </el-col>
      </el-row>
    </el-form> -->
    <!-- 银行还款 -->
    <h1>银行还款:</h1>
    <el-form label-width="154px" style="margin-top:20px" :model="show">
      <el-row>
        <el-col :xl="6" :lg="8">
          <el-form-item class="lable_input" label="放款时间：">
            <el-date-picker
              v-model="show.loanTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8">
          <el-form-item class="lable_input" label="解除担保时间：">
            <el-date-picker
              v-model="show.loanRelieveTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker></el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="初始还款时间：">
            <el-date-picker
              v-model="show.loanRepaymentTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8">
          <el-form-item class="lable_input" label="月还款金额：">
            <el-input
              :disabled="true"
              v-model="show.loanRepaymentMoney"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="当前逾期金额：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdueMoney"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="当前逾期期数：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdueMonth"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :xl="6" :lg="8"
          ><el-form-item class="lable_input" label="更新时间：">
            <el-date-picker
              v-model="show.loanUpTime"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              :picker-options="pickerOptions"
              :disabled="true"
            >
            </el-date-picker> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-form-item label="历史逾期情况：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdue"
              type="textarea"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24"
          ><el-form-item label="历史逾期联系情况：">
            <el-input
              :disabled="true"
              v-model="show.loanOverdueContact"
              type="textarea"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24"
          ><el-form-item label="贷后备注：">
            <el-input
              :disabled="true"
              v-model="show.loanPostscript"
              type="textarea"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="24">
          <el-button type="primary" v-if="showUpLoansSuffix" @click="btnFun"
            >编 辑</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 银行还款添加编辑对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="154px" :model="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="放款时间：">
              <el-date-picker
                v-model="form.loanTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="解除担保时间：">
              <el-date-picker
                v-model="form.loanRelieveTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker></el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="借款人初始还款时间：">
              <el-date-picker
                v-model="form.loanRepaymentTime"
                type="datetime"
                placeholder="选择日期时间"
                align="right"
                :picker-options="pickerOptions"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="借款人月还款金额：">
              <el-input
                v-model="form.loanRepaymentMoney"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="当前逾期金额：">
              <el-input
                v-model="form.loanOverdueMoney"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="当前逾期期数：">
              <el-input
                v-model="form.loanOverdueMonth"
              ></el-input> </el-form-item
          ></el-col>

          <el-col :span="24">
            <el-form-item label="历史逾期情况：">
              <el-input
                v-model="form.loanOverdue"
                type="textarea"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="24"
            ><el-form-item label="历史逾期联系情况：">
              <el-input
                v-model="form.loanOverdueContact"
                type="textarea"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :span="24"
            ><el-form-item label="贷后备注：">
              <el-input
                v-model="form.loanPostscript"
                type="textarea"
              ></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 服务费逾期添加编辑对话框 -->
    <el-dialog
      :title="title1"
      :visible.sync="dialogVisible1"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="154px" :model="form1">
        <el-row>
          <el-col :span="12"
            ><el-form-item label="当前逾期金额：">
              <el-input v-model="form1.lendingAmount"></el-input> </el-form-item
          ></el-col>
          <el-col :span="12"
            ><el-form-item label="当前逾期期数：">
              <el-input v-model="form1.haveAccount"></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="submit1">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 每月还款额添加编辑对话框 -->
    <!-- <el-dialog
      :title="title2"
      :visible.sync="dialogVisible2"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <el-form label-width="154px" :model="form2">
        <el-row>
          <el-col :span="12"
            ><el-form-item label="当前逾期金额：">
              <el-input v-model="form2.surplusMoney"></el-input> </el-form-item
          ></el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="submit2">提 交</el-button>
      </span>
    </el-dialog> -->
  </div>
</template>

<script>
import {
  getChargePart,
  postLoansSuffix,
  putUpServiceLoans,
  // putServiceCharge
} from "../../assets/js/api";
import { checkPermiss } from "../../assets/js/utlis";
export default {
  name: "PostLoan",
  data() {
    return {
      show: {},
      show1: {},
      // show2: {},
      form: {},
      form1: {},
      // form2: {},
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      title: "贷后信息",
      title1: "服务费分期信息",
      title2: "每月还款额",
      orderNumber: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      golbalPermissions: []
    };
  },
  created() {
    this.golbalPermissions = localStorage.getItem("permissions").split(",");
    this.orderNumber = sessionStorage.getItem("orderNumber");
    this.getList();
  },
  computed: {
    //待后信息编辑按钮
    showUpLoansSuffix: function() {
      return checkPermiss(
        "business:upForm:upLoansSuffix",
        this.golbalPermissions
      );
    }
  },
  methods: {
    //   获取贷后信息
    getList() {
      getChargePart({ orderNumber: this.orderNumber }).then(res => {
        this.show = res.data;
        this.show1.lendingAmount = res.data.lendingAmount;
        this.show1.haveAccount = res.data.haveAccount;
        // this.show2.surplusMoney = res.data.surplusMoney;
      });
    },
    btnFun() {
      this.dialogVisible = true;
      this.form = JSON.parse(JSON.stringify(this.show));
    },
    btnFun1() {
      this.dialogVisible1 = true;
      this.form1 = JSON.parse(JSON.stringify(this.show1));
    },
    // btnFun2() {
    //   this.dialogVisible2 = true;
    //   this.form2 = JSON.parse(JSON.stringify(this.show2));
    // },
    submit() {
      this.form.orderNumber = this.orderNumber;
      postLoansSuffix(this.form).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.getList();
          this.dialogVisible = false;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    submit1() {
      this.form1.orderNumber = this.orderNumber;
      putUpServiceLoans(this.form1).then(res => {
        if (res.code == 200) {
          this.$message({
            message: res.message,
            type: "success"
          });
          this.getList();
          this.dialogVisible1 = false;
        } else {
          this.$message({
            message: res.message,
            type: "error"
          });
        }
      });
    },
    // submit2() {
    //   this.form2.orderNumber = this.orderNumber;
    //   putServiceCharge(this.form2).then(res => {
    //     if (res.code == 200) {
    //       this.$message({
    //         message: res.message,
    //         type: "success"
    //       });
    //       this.getList();
    //       this.dialogVisible2 = false;
    //     } else {
    //       this.$message({
    //         message: res.message,
    //         type: "error"
    //       });
    //     }
    //   });
    // }
  }
};
</script>

<style scoped type="less">
.el-date-editor.el-input {
  width: auto;
}
::v-deep .el-form-item__content {
  text-align: left;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
.lable_input ::v-deep .el-form-item__label,
.lable_input ::v-deep .el-form-item__content,
.lable_input ::v-deep .el-input__inner,
.lable_input ::v-deep .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.lable_input ::v-deep.el-input__icon {
  line-height: 24px;
}
h1 {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}
</style>
